

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://struts.apache.org/tags-html"  prefix="html" %> 
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/struts-tags" prefix="s" %>





<s:actionerror/>
<div style="padding:10px;border:1px solid #333;float:left;width:47%;margin-right:2px;height:50px;">
    <table>
        <tr>
            <td>
                Filter:
            </td>
            <td>
                <input type="text" id="searchString" />
            </td>
            <td width="100" align="right" rowspan="2">
                <button id="addStudentButton">Add Student</button>
            </td>
        </tr>
        <tr>
            <td>Student:</td>
            <td>
                <div id="selectStudent">
                    <select name="students" id="student">
                        <s:iterator value="students">
                            <option value="<s:property value="userId"/>"><s:property value="studentName"/> (<s:property value="userId"/>)</option>
                        </s:iterator>
                    </select>
                </div>
                <div id="copy" style="display:none;">
                    <select name="student" id="student">
                        <s:iterator value="students">
                            <option value="<s:property value="userId"/>"><s:property value="studentName"/> (<s:property value="userId"/>)</option>
                        </s:iterator>
                    </select>
                </div>
            </td>

        </tr>
    </table>
</div>
<div style="padding:10px;border:1px solid #333;float:left;width:47%;height:50px;">
    <s:form action="/module/view_%{moduleCode}.action" enctype="multipart/form-data">
        <table>
            <tr>
                <td>CSV file to import:</td>
                <td><s:file name="usersfile" cssStyle="width:120px;"/></td>
                <td>
                    <button id="importStudentButton">Import students</button>
                </td>
            </tr>
        </table>
    </s:form>
</div>
<div style="clear:left;"></div>
<br/>
<br/>
<c:if test="${!empty allStudents}">
    <table id="classTable" cellspacing="1" cellpadding="1" class="tablesorter" style="width:500px;" border="1">
        <thead>
            <tr>
                <th>Student ID</th>
                <th>Student Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <s:iterator value="allStudents"> 
                <tr>
                    <td><s:property value="userId"/></td>
                    <td><s:property value="studentName"/></td>
                    <td>
                        <img src="<s:url value="/img/icons/stop.png"/>" alt="Withdraw / defer student" border="0" />
                    </td>
                </tr>
            </s:iterator>
        </tbody>
    </table>
</c:if>

<div id="pager" class="pager" style="width:500px;text-align: center">
    <form>
        <img src="<s:url value="/img/icons/arrow_left_blue.png" />" class="first" style="vertical-align: middle; cursor: pointer;" alt="First page" />
        <img src="<s:url value="/img/icons/arrow_left_green.png" />" class="prev" style="vertical-align: middle; cursor: pointer;" alt="Previous page" />
        <span style="display: inline-block; vertical-align: middle;" class="pagedisplay"></span>
        <img src="<s:url value="/img/icons/arrow_right_green.png" />" class="next" style="vertical-align: middle; cursor: pointer;" alt="Next page">
        <img src="<s:url value="/img/icons/arrow_right_blue.png" />" class="last" style="vertical-align: middle; cursor: pointer;" alt="Last page">
        <select class="pagesize" style="display: inline-block; vertical-align: middle">
            <option selected="selected" value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </form>
</div>

<script type="text/javascript">
    
    $(function(){
        $( "#addStudentButton").button({icons: {primary:'ui-icon-circle-plus'}});
        $( "#importStudentButton").button({icons: {primary:'ui-icon-contact'}});
        $( "#addStudentButton").click( function () {
            $.post('<s:url value="/studentModule/update_%{moduleCode}"/>',{ studentId:$('#selectStudent #student :selected').val()}, function(data){
                $('#tabs').tabs( "load" ,2);
            })           
        });
        
        $('#searchString').keydown(function () {
            filter();
        });
        
        $("#classTable").tablesorter({
            headers : {
                2 : {
                    sorter : false
                }
            },
            sortList : [ [ 1, 0 ] ]
        }).tablesorterPager({
            container : $("#pager")
        });
        
    });
    
    function filter() {
        $('#selectStudent #student').remove();
        $('#copy #student').clone().appendTo('#selectStudent');
        $('#selectStudent #student option:not(:contains(\''+ $('#searchString').val() + '\'))').remove();	
    }
    
</script>